<template>
  <div id="paichartsmap"></div>
</template>

<script>
import * as echarts from "echarts";
import xjmap from "./xjMap.json"
import piontdata from "./datajson.json"
export default {
  name: "PAicharts2",
  data() {
    return {
      chart: null,
      options: null,
      xjmap,

    };
  },
  mounted() {
   this.initcharts();

  },
  
  methods: {
    initcharts() {
      this.chart = echarts.init(document.getElementById("paichartsmap")); 
      echarts.registerMap('xianju', xjmap);
      this.options =  {
        backgroundColor: '#091c3d', 
        geo: {
            show: false,
            map: 'xianju',
            label: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                },
            },
            roam: true,
            itemStyle: {
                show:true,
                normal: {
                    areaColor: 'transparent',
                    borderColor: '#3fdaff',
                    borderWidth: 2,
                    shadowColor: 'rgba(63, 218, 255, 0.5)',
                    shadowBlur: 30,
                },
                emphasis: {
                    areaColor: '#2B91B7',
                },
            },
        },
        series: [
            {
                type: 'map',
                roam: false,
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize:15,
                            fontWeight:500,
                        },
                    },
                    emphasis: {
                        textStyle: {
                            color: 'rgb(183,185,14)',
                        },
                    },
                },

                itemStyle: {
                    normal: {
                        areaColor: '#003669',
                        borderColor: '#3fdaff',
                        borderWidth: 2,
                        shadowColor: 'rgba(63, 218, 255,0.6)',
                        shadowBlur: 35,
                    },
                    emphasis: {
                        areaColor: '#2B91B7',
                    },
                },
                zoom: 1.1,
                map: 'xianju', //使用
            },
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                showEffectOn: 'render',
                zlevel: 1,
                rippleEffect: {
                    period: 15,
                    scale: 4,
                    brushType: 'fill',
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        offset: [15, 0],
                        color: '#1DE9B6',
                        show: true,
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#1DE9B6',
                        shadowBlur: 20,
                        shadowColor: '#333',
                    },
                },
                symbolSize: 12,
                data: piontdata,
            }, //地图线的动画效果
        ],
    };
      this.chart.setOption(this.options);
    },
  },
};
</script>

<style lang="scss" scoped>
#paichartsmap {
  height: 300px;
  width: 640px;
}
</style> 